<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>Python 可视化分析（Plotly）</title>
  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
  <style>body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto} .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px} @media(max-width:900px){.grid{grid-template-columns:1fr}}</style>
</head>
<body>
  <div class="grid">
    <div id="chart_tscore" style="height:380px"></div>
    <div id="chart_risk" style="height:380px"></div>
  </div>
  <script>
    // 演示数据（与前端 sample 保持一致）
    const patients = [
      {name:'张三', bmd:[{tScore:-2.7},{tScore:-2.6},{tScore:-2.5}], risk:'高'},
      {name:'李四', bmd:[{tScore:-1.8},{tScore:-1.6},{tScore:-1.5}], risk:'中'},
      {name:'王五', bmd:[{tScore:-3.1},{tScore:-2.9},{tScore:-2.8}], risk:'高'},
      {name:'赵六', bmd:[{tScore:-0.8},{tScore:-0.6}], risk:'低'},
      {name:'钱七', bmd:[{tScore:-1.4},{tScore:-1.3}], risk:'中'},
      {name:'孙八', bmd:[{tScore:-2.9},{tScore:-2.7}], risk:'高'},
      {name:'周九', bmd:[{tScore:-0.4}], risk:'低'},
      {name:'吴十', bmd:[{tScore:-1.7},{tScore:-1.5}], risk:'中'},
      {name:'郑十一', bmd:[{tScore:-3.3},{tScore:-3.0}], risk:'高'},
      {name:'王十二', bmd:[{tScore:-0.9}], risk:'低'}
    ];

    // 图1：最新 T 分数柱状图
    const labels = patients.map(p=>p.name);
    const tScores = patients.map(p=>p.bmd[p.bmd.length-1].tScore);
    Plotly.newPlot('chart_tscore', [{
      x: labels, y: tScores, type: 'bar', marker:{color: tScores.map(v => v < -2.5 ? '#dc3545' : v < -1 ? '#ffc107' : '#198754')}
    }], {title:'最新T分数', margin:{t:40,l:40,r:10,b:40}}, {displayModeBar:false});

    // 图2：风险占比
    const count = {高:0, 中:0, 低:0}; patients.forEach(p=>count[p.risk]++);
    Plotly.newPlot('chart_risk', [{
      labels:['高','中','低'], values:[count['高'], count['中'], count['低']], type:'pie', hole:.45,
      marker:{colors:['#dc3545','#ffc107','#198754']}
    }], {title:'风险分布', margin:{t:40,l:10,r:10,b:10}, legend:{orientation:'h'}}, {displayModeBar:false});
  </script>
</body>
</html>
